<template>
	<view class="AuditStatus">
		<view class="audit f-background margin-bottom-20 text-align radius24">
			<image class="status-img" :src="state[byInfo.applyStatus].icon" mode=""></image>
			<view class="font-weight-600 color3 size-40 margin-bottom-24">{{state[byInfo.applyStatus].state}}</view>
			<view class="status-title color-8 size-28">{{state[byInfo.applyStatus].describe}}</view>
			<view class="resubmit size-30 color" v-if="byInfo.applyStatus == 2" @click="onResubmit(id)">重新提交</view>
			<view class="resubmit color3 size-30 dis" v-if="byInfo.applyStatus == 0" @click="getGetInfoById(true)">
				<text class="iconfont icon-shuaxin size-30"></text> 刷新
			</view>
			<view class="audit-reason" v-if="byInfo.applyStatus == 2">
				<view class="reason flex radius12">
					<!-- <text class="iconfont icon-jujue size-36"></text> -->
					<view class="size-28">拒绝原因：{{byInfo.remarks}}</view>
				</view>
			</view>
		</view>
		<view class="audit-info f-background margin-bottom-20 radius24">
			<view class="color-8 size-30">
				<view class="info-name dis-ali"> 服务小区</view>
				<view class="info-def color0 size-34">
					<text v-for="(item,index) in byInfo.infos" :key="index">
						{{index != 0? '、' : ''}}{{item.communityName}}
					</text>
				</view>
			</view>
			<view class="color-8 size-30">
				<view class="info-name dis-ali"> 申请信息</view>
				<view class="info-def color0 size-34">{{byInfo.applyType == 5 ? '团长':'跑腿员'}} {{byInfo.nameHidden}}
					({{byInfo.sex*1 ? '男士' : '女士'}}) {{byInfo.phoneNumberHidden}}</view>
			</view>
		</view>
		<view class="audit-code f-background text-align radius24" v-if="byInfo.applyStatus == 1">
			<image show-menu-by-longpress class="code-img" :src="byInfo.qrCode" mode=""></image>
			<view class="color3 size-28">长按二维码识别 前往{{byInfo.applyType == 5 ? '团长':'跑腿员'}}端</view>
		</view>
		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	import { GetInfoById } from "@/api/index"
	export default {
		data() {
			return {
				state: {
					2: {
						state: '已拒绝',
						describe: '按照拒绝原因核对资料后重新提交',
						icon: require('@/static/icon/yjj.png'),
					},
					1: {
						state: '已通过',
						describe: '审核通过 欢迎您的加入',
						icon: require('@/static/icon/ytg.png'),
					},
					0: {
						state: '审核中',
						describe: '审核结果会在1-7天内反馈 请耐心等待',
						icon: require('@/static/icon/shz.png'),
					}
				},
				id: 0,
				byInfo: {},
			}
		},
		onLoad(options) {
			console.log('options', options)
			this.id = options.type
			this.getGetInfoById()
		},
		methods: {
			async getGetInfoById(bool) {
				const { code, data } = await GetInfoById({ id: this.id })
				if (code == '200') {
					this.byInfo = data
					if (bool) uni.$u.toast('刷新成功', 2000)
				}
			},
			onResubmit(id) {
				uni.redirectTo({
					url: `/packagePerson/apply-join/apply-join?id=${id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.AuditStatus {
		// padding-top: 20rpx;
		padding: 20rpx;

		.audit {
			padding: 60rpx 32rpx 0;

			.status-img {
				width: 68rpx;
				height: 68rpx;
				margin: 0 auto 32rpx;
			}

			.status-title {
				padding-bottom: 60rpx;
			}
		}

		.audit-info {
			padding: 40rpx 32rpx;
			display: grid;
			grid-gap: 40rpx;
		}

		.audit-reason {
			padding: 0 0 24rpx;
			text-align: left;

			.reason {
				background: #FDFCEC;
				padding: 24rpx;
				color: #F86E21;
			}

			.icon-jujue {
				margin-top: 5rpx;
				margin-right: 10rpx;
			}
		}

		.info-name {
			margin-bottom: 20rpx;

			.iconfont {
				display: block;
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
				text-align: center;
				line-height: 32rpx;
			}
		}

		.resubmit {
			padding-bottom: 40rpx;
		}

		.info-def {
			// padding-left: 46rpx;
			line-height: 44rpx;
		}

		.audit-code {
			padding: 100rpx 0 106rpx;

			.code-img {
				width: 402rpx;
				height: 400rpx;
				margin: 0 auto 40rpx;
			}
		}
	}
</style>